<template>
  <div class="maincontent">
    <el-form :inline="true"   ref="ruleForm" :model="formData" label-width="90px" :rules="formDataRules">
      <div class="maintitle">基本信息</div>
      <div class="formcontent">
        <el-form-item label="项目名称" prop="name">
          <el-input v-model="formData.name" style="width:200px;"></el-input>
        </el-form-item>
        <!-- <el-form-item label="项目编号">
                    <el-input v-model="form.number" style="width:200px;"></el-input>
        </el-form-item>-->
      </div>
      <div>
        <el-form-item label="所属区县" prop="district">
          <el-select v-model="formData.district" placeholder="所属区县" @change="handleSelectDistrict">
            <el-option
              v-for="item in districtMessages"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="乡镇" prop="countryside">
          <el-select
            v-model="formData.countryside"
            placeholder="所属乡镇"
            @change="handleSelectCountry"
          >
            <el-option
              v-for="item in countryMessages"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="行政村" prop="village">
          <el-select v-model="formData.village" placeholder="所属村落">
            <el-option
              v-for="item in villageMessages"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="maintitle" style="margin-top:40px;">详细信息</div>
      <div class="formcontent">
        <el-form-item label="项目级别" prop="level">
          <el-select v-model="formData.level" placeholder="请选择级别">
            <el-option label="市级" :value="0"></el-option>
            <el-option label="区县级" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目年度" v-show="formData.level == 0" prop="year">
          <el-date-picker v-model="formData.year" type="year" placeholder="选择年" value-format="yyyy"></el-date-picker>
        </el-form-item>
        <el-form-item label="项目类型" prop="type">
          <el-select v-model="formData.type" placeholder="请选择类型">
            <el-option
              v-for="item in projectTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="图编号" v-show="formData.level == 0" prop="frameNumber">
          <el-input v-model="formData.frameNumber" style="width:200px;"></el-input>
        </el-form-item>-->
        <el-form-item label="项目工期" prop="duration">
          <el-input v-model="formData.duration" :min="1" style="width:200px;" type="number">
            <template slot="append">月</template>
          </el-input>
        </el-form-item>
        <el-form-item label="投资回收期" :min="1" label-width="95px" v-show="formData.level == 0" prop="recover">
          <el-input v-model="formData.recover" style="width:200px;" type="number" min="0">
            <template slot="append">月</template>
          </el-input>
        </el-form-item>
        <el-form-item label="是否属于高标准基本农田项目" label-width="210px" prop="isStandard">
          <el-select v-model="formData.isStandard">
            <el-option label="是" :value="0"></el-option>
            <el-option label="否" :value="1"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import {
  getDistrictInformation,
  getCountrysideInformation,
  getNewProjectAdd,
  getProjectType
} from "@/api/projectManage/districtProject.js";
export default {
  data() {
    return {
      formData: {
        name: "",
        district: "",
        countryside: "",
        village: "",
        year: "",
        level: 0,
        type: "",
        // frameNumber: "",
        duration: 1,
        recover: 1,
        isStandard: 1
      },
      formDataRules: {
        name: [
          {
            required: true,
            message: "请输入项目名称",
            trigger: "chan"
          }
        ],
        district: [
          {
            required: true,
            message: "请选择所属区县",
            trigger: "change"
          }
        ],
        countryside: [
          {
            required: true,
            message: "请选择所属乡镇",
            trigger: "change"
          }
        ],
        village: [
          {
            required: true,
            message: "请选择所属村落",
            trigger: "change"
          }
        ],
        level: [
          {
            required: true,
            message: "请选择级别",
            trigger: "change"
          }
        ],
        year: [
          {
            required: true,
            message: "请选择年限",
            trigger: "blur"
          }
        ],
        type: [
          {
            required: true,
            message: "请选择类型",
            trigger: "change"
          }
        ],
        duration: [
          {
            required: true,
            message: "请输入项目工期",
            trigger: "blur"
          }
        ],
        recover: [
          {
            required: true,
            message: "请选择投资回收期",
            trigger: "blur"
          }
        ],
        isStandard: [
          {
            required: true,
            message: "请选择是否属于高标准基本农田项目",
            trigger: "change"
          }
        ]
      },
      districtMessages: [], //区县信息
      countryMessages: [], //乡镇信息
      villageMessages: [], //行政村信息
      projectTypeList: [] //项目类型
    };
  },
  methods: {
    // 获取当前年份
    getCurrentYear: function() {
      var myDate = new Date();
      this.formData.year = String(myDate.getFullYear());
    },
    getInitData: function() {
      this.getDistrictMessage();
      this.getProjectType();
    },
    //区县信息勾选回调
    handleSelectDistrict: function(id) {
    
    },
    //乡镇信息勾选回调
    handleSelectCountry: function(id) {
      this.getVillageMessage(id);
    },
    //获取区县信息
    getDistrictMessage: function() {
      getDistrictInformation().then(res => {
        this.districtMessages.push(res.data);
        this.formData.district = res.data.id;
          this.getCountryMessage(res.data.id);
      });
    },
    //获取乡镇信息
    getCountryMessage: function(id) {
      getCountrysideInformation({ parentId: id }).then(res => {
        this.countryMessages = res.data;
      });
    },
    //获取行政村信息
    getVillageMessage: function(id) {
      getCountrysideInformation({ parentId: id }).then(res => {
        this.villageMessages = res.data;
      });
    },
    //获取项目类型
    getProjectType: function() {
      getProjectType().then(res => {
        this.projectTypeList = res.data;
      });
    },
    //提交保存
    handleSubmit: function() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          this.formData.duration = this.formData.duration * 1;
          this.formData.recover = this.formData.recover * 1;
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          getNewProjectAdd(this.formData)
            .then(res => {
              loading.close();
              this.$message({
                message: "新建项目成功！",
                type: "success"
              });
              setTimeout(()=>{
                  this.$router.push('/projectManagement/planningStage/dealwith');
              },2000)
            })
            .catch(res => {
              loading.close();
            });
        } else {
          return false;
        }
      });
    }
  },
  created() {
    this.getInitData();
    this.getCurrentYear();
  }
};
</script>

<style lang="scss" scoped>
.maincontent {
  padding: 30px 40px;
  .maintitle {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 25px;
    color: #4d4d4d;
  }
  .formcontent {
    margin-top: 30px;
    width: 1000px;
  }
}
</style>
 